<!doctype html>
<html lang="en">

<head>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
</head>

<body>

<div>
    <h1>Hello App!</h1>
    <div id="app">
        <div>
            <router-link to="/">Go to Home</router-link>
        </div>
        <div>
            <router-link to="/about">Go to 1</router-link>
        </div>
        <div>
            <router-link to="/4213412">Go to 2</router-link>
        </div>
        <div>
            <router-link to="/fdasfa">Go to 3</router-link>
        </div>
        <router-view></router-view>
    </div>
    <script>

        const router = VueRouter.createRouter({
            routes: [],
            history: VueRouter.createWebHashHistory(),
        });

        router.beforeEach(function (to, fr, next) {
            console.log(fr.fullPath, '-- to -->', to.fullPath)
            if (router.hasRoute(to.fullPath)) {
                next();
            } else {
                router.addRoute({
                    name: to.fullPath,
                    path: to.fullPath,
                    component: httpVueLoader('test.html.vue')
                });
                next({name: to.fullPath});
            }
        });

        router.afterEach(function (to) {
            if (router.hasRoute(to.fullPath)) {
                router.removeRoute(to.fullPath)
            }
        });

        Vue.createApp({}).use(router).mount('#app')
    </script>
</body>
</html>